<template>
	<view class="topbar flex align-center animate__animated animate__fadeIn">
		<image class="icon" src="/static/images/more.png" @click="showSidebar" mode="widthFix"></image>
		<view class="flex1 title">{{ $t("index.title") }}</view>
		<view class="flex align-center">
			<image class="icon" src="/static/images/huodong.png" @click="router.push('/pages/common/activity')"
				mode="widthFix"></image>
			<image class="icon" @click="router.push('/pages/common/message')" src="/static/images/msg.png"
				mode="widthFix"></image>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { useCool, useStore } from "/@/cool";
import { useIndexStore } from "../store/index";
const { router, service } = useCool();
const indexStore = useIndexStore();
const { user } = useStore();
const showSidebar = () => {
	if (user.info) {
		indexStore.data.sidebar_show = true
	} else {
		router.login()
	}
};
</script>

<style lang="scss" scoped>
.topbar {
	width: 100%;
	height: 80rpx;
	padding: 0 8rpx;
	box-sizing: border-box;
	background-color: #fff;
	/* #ifdef MP */
	padding-right: 188rpx;
	/* #endif */
	/* #ifdef H5 */
	height: 120rpx;

	/* #endif */
	.title {
		font-family: PingFangSC;
		font-weight: 500;
		font-size: 35rpx;
		color: #333333;
		text-align: center;
		text-indent: 80rpx;
	}

	.icon {
		width: 80rpx;
		height: 80rpx;
	}
}
</style>
